/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, Cell, Input, InputLine, LineColumn, Select, Table, TableBody, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {config设备概况} from "./Regular.O-1";
import {FootMenRow} from "../../contain/rarelyVary";

interface ItemConclusionProps  extends InternalItemProps{
    startd?: boolean;
}
export const itemA结论 = ['检验结论', '检验日期','检验日期1','结论备注','产品种','产类别', '订货单位','评定标准'];
const defaultValCb= (par: any)=>{
    const { 产品种,产类别 }=par||{};
    if(!产品种)   par.产品种='焊接钢管';
    if(!产类别)   par.产类别='压力管道管子';
    return  par;
}
const 评定标准选 = ['API Spec 5L(第46版） PSL2',
    'GB/T9711-2023《石油天然气工业管线输送系统用钢管》'
];
//证书 下半张页面：
export const ConclusionPolyZ =
React.forwardRef((
    {children, show, alone = true, refWidth,label,startd=false,}: ItemConclusionProps, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA结论,defaultValCb);
    const {inp, setInp} = useItemInputControl({ref});
    return (
        <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                             alone={alone} label={label!}>
            <Text variant="h5">
                {label} (报告下结论)：
            </Text>
            <LineColumn>
                <InputLine label='产品品种:'>
                    <Input value={inp?.产品种 || ''}
                           onChange={e => setInp({...inp, 产品种: e.currentTarget.value || undefined})}/>
                </InputLine>
                <InputLine label='产品类别:'>
                    <Input value={inp?.产类别 || ''}
                           onChange={e => setInp({...inp, 产类别: e.currentTarget.value || undefined})}/>
                </InputLine>
            </LineColumn>
            <InputLine label='订货单位:'>
                <BlobInputList value={inp?.订货单位 || ''} rows={2}
                               onListChange={v => setInp({...inp, 订货单位: v || undefined})}/>
            </InputLine>
            <div>
                按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该批产品经本机构实施监督检验，安全性能符合
                <BlobInputList datalist={评定标准选} style={{display: 'inline-table', maxWidth: '22rem'}}
                               value={inp?.评定标准 || ''} rows={2}
                               onListChange={v => setInp({...inp, 评定标准: v || undefined})}/>
                的要求， 特发此证书。
            </div>
            <hr/>
            <Text variant="h5">备注：</Text>
            <TextArea value={inp?.结论备注 || ''} rows={5}
                      onChange={e => setInp({...inp, 结论备注: e.currentTarget.value || undefined})}/>

            <InputLine label='检验结论'>
                <Select inputSize="md" css={{minWidth: '140px', fontSize: '1.3rem', padding: '0 1rem'}}
                        value={inp?.检验结论 || ''}
                        onChange={e => setInp({...inp, 检验结论: e.currentTarget.value || undefined})}
                >
                    <option></option>
                    <option>符合</option>
                    <option>不符合</option>
                </Select>
            </InputLine>
            <InputLine label='设置检验日期'>
                <Input value={inp?.检验日期 || ''} type='date'
                       onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
            </InputLine>
            {startd &&
                <InputLine label='检验起始日期'>
                    <Input value={inp?.检验日期1 || ''} type='date'
                           onChange={e => setInp({...inp, 检验日期1: e.currentTarget.value})}/>
                </InputLine>
            }

        </InspectRecordLayout>
    );
});

//下半张纸张都是空白，难看，改成尽量中间靠拢的。
export const 检验结论报告 = ({orc, rep, theme}: { orc: any, rep: any, theme: any }
) => {
    const renderUpper = usePrefixDataTable({config: config设备概况, orc, rep, slash: true});
    return <>
       <div css={{"@media print": {minHeight: '80vh', alignContent: 'center',pageBreakInside: 'avoid'}}}>
            <Text variant="h6" css={{fontSize:'0.8rem',textAlign: 'end',marginBottom:0}}> FJJ/DA-1041-1-2020 </Text>
            <Text variant="h2" css={{textAlign: 'center',
            }}>埋弧焊钢管制造监督检验项目表</Text>
            <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
            }}>监检编号：{rep.isp?.no}</Text>
            <Table id='Survey' fixed={ ["5.1%","9%", "40%", "5%", "5.1%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
                <TableBody>
                    <RepLink rep={rep} tag={'Survey'}>
                        {renderUpper}
                    </RepLink>
                    <RepLink rep={rep} tag={'Conclusion'}>
                        <TableRow id='Conclusion'>
                            <Cell colSpan={6}>
                                <div css={{minHeight: '7rem', whiteSpace: 'pre-wrap'
                                }}>备注：<br/>{orc.结论备注 ?? '／'}</div>
                            </Cell>
                        </TableRow>
                        <TableRow>
                            <Cell colSpan={6} css={{whiteSpace:'pre-wrap'}}>
                                结论意见：<br/>
                                <Text variant="h4" css={{textAlign:'center'}}>
                                    {orc.检验结论 ?? '／'}
                                </Text>
                            </Cell>
                        </TableRow>
                    </RepLink>
                </TableBody>
                <FootMenRow span={6} orc={orc} rep={rep} cap='监检' scap='校核'/>
            </Table>
       </div>
    </>;
};
